<template>
  <div>
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">面经后台</el-breadcrumb-item>
      <el-breadcrumb-item>面经管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <template v-slot:header>
        <el-row type="flex" justify="space-between">
          <div>共{{total}}条记录</div>
          <el-button round type="primary" size="small" @click="addArticle">+ 添加面经</el-button>
        </el-row>
      </template>
      <!-- 表格
        data: 接收渲染的数据的属性，数据类型为数组
        border: 边框  下面写法就是:border="true"的简写
       -->
      <el-table :data="tableData" border style="width: 100%">
        <!--
          el-table-column: 表格的列
            label：用于设置表头标题的属性
            prop: 对应列内容的字段名(属性名)
            width：设置列的宽
         -->
        <el-table-column prop="stem" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="creator" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="likeCount" label="点赞" width="180">
        </el-table-column>
        <el-table-column prop="views" label="浏览数"> </el-table-column>
        <el-table-column prop="createdAt" label="更新时间"> </el-table-column>
        <el-table-column label="操作" width="100">
          <!-- 作用域插槽 -->
          <!-- <template v-slot="{row,column,$index}"> -->
          <template v-slot="{row}">
            <!--
              row,column,$index 这3变量都是column组件通过作用域插槽传回来的数据
              row:  这个数据表示 当前行对应的数据对象
              column: 这个数据表示当前列组件中定义的包含所有属性的对象（这些属性是column组件内部声明数据）
              $index：表示当前行对应的下标值
             -->
            <!-- {{ $index }} -->
            <el-row type="flex" justify="space-between">
              <i class="el-icon-view" @click="preview(row.id)"></i>
              <i class="el-icon-edit-outline" @click="edit(row.id)"></i>
              <i class="el-icon-delete" @click="del(row.id)"></i>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <!--
          layout: 表示需要显示的内容，用逗号分隔，布局元素会依次显示
            prev：表示上一页（左箭头）
            pager：页码列表
            next：下一页（右箭头）
          total：数据总量 --- 分页器默认每页展示10条件数据
         -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange">
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 抽屉组件
    close: 是抽屉组件提供的事件，在关闭组件时触发
    比如：点击组件右上角关闭按钮时触发 -->
    <el-drawer
      :title="article.id?'编辑面经':'添加面经'"
      :visible.sync="isShow"
      @close="close">
      <!--
        label: 设置表单旁边的文字
        label-width：设置label的宽度
       -->
       <!--
        添加校验规则
          1、给form组件添加model属性
          2、给form组件添加rules属性
          3、给form-item组件添加prop属性
          4、表单要进行双向绑定
        -->
      <el-form ref="form" :model="article" :rules="rules" label-width="80px">
        <el-form-item label="活动名称" prop="stem">
          <el-input v-model="article.stem" ></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- 富文本插件
          默认情况下，elementUI是无法校验自身组件之外的其他插件的组件
          因此对于富文本内容的校验需要我们单独处理
          怎么处理呢？
          答：elementUI提供一个方法让我们能够单独对某一个内容进行校验
            这个方法就是：validateField
          -->
          <quillEditor v-model="article.content" @blur="$refs.form.validateField('content')"></quillEditor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submit">确定</el-button>
          <el-button size="small" @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 预览抽屉组件 -->
    <el-drawer
      title="预览面经"
      :visible.sync="previewShow">
      <div style="padding: 10px 20px;">
        <h2>{{ article.stem }}</h2>
        <div class="content" v-html="article.content"></div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { articleList, addArticle, deleteArticle, getArticleDetail, updateArticle } from '@/api/article'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: { quillEditor },
  data () {
    return {
      tableData: [], // 表格数据
      total: 0, // 面经的总数量
      current: 1, // 当前页码
      pageSize: 10, // 每页展示的数量
      isShow: false,
      article: {
        stem: '', // 标题
        content: '' // 内容
      },
      rules: {
        stem: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      previewShow: false
    }
  },
  created () {
    // 获取面经列表数据
    this.getArticleList()
  },
  methods: {
    // 获取面经列表数据
    async getArticleList () {
      const res = await articleList({
        current: this.current,
        pageSize: this.pageSize
      })
      // 保存表格数据
      this.tableData = res.data.data.rows
      // 保存面经总数量
      this.total = res.data.data.total
    },
    // 分页功能
    currentChange (val) {
      // val: 获取到当前点击页码的值
      this.current = val
      this.getArticleList()
    },
    // 添加面经
    addArticle () {
      this.isShow = true
    },
    // 确定 提交 进行新增 / 编辑
    submit () {
      // 添加校验
      this.$refs.form.validate(async bool => {
        if (bool) {
          // 校验通过
          // 调用接口, 判断id存在的时候表示编辑否则新增
          if (this.article.id) {
            // 编辑
            await updateArticle({
              id: this.article.id,
              stem: this.article.stem,
              content: this.article.content
            })
          } else {
            // 新增
            await addArticle(this.article)
          }
          // 成功 刷新列表
          this.getArticleList()
          // 关闭抽屉组件
          this.close()
        }
      })
    },
    // 关闭抽屉组件
    close () {
      this.isShow = false
      // 清空内容
      this.article = {
        stem: '', // 标题
        content: '' // 内容
      }
      // 清空校验规则  --- 还能清空表单的数据
      this.$refs.form.resetFields()
    },
    // 删除面经
    del (id) {
      // 询问框
      this.$confirm('您确认删除这篇面经吗 ?', '提示', {
        confirmButtonText: '确定', // 设置确定按钮的文字
        cancelButtonText: '取消', // 设置取消按钮的文字
        type: 'warning' // 设置问题前面的图标
      }).then(async () => {
        console.log('用户点击了确定按钮')
        // 调用接口 实现删除
        await deleteArticle({ id })
        // 刷新列表
        this.getArticleList()
      }).catch(() => {
        console.log('用户点击了取消按钮')
      })
    },
    // 编辑面经
    async edit (id) {
      this.isShow = true
      // 调用接口 获取对应面经的详情
      const res = await getArticleDetail({ id })
      // 实现数据回显
      this.article = res.data.data
    },
    // 预览面经
    async preview (id) {
      this.previewShow = true
      // 调用接口 获取对应面经的详情
      const res = await getArticleDetail({ id })
      // 实现数据回显
      this.article = res.data.data
      // console.log(this.article)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card {
  margin-top: 20px;
}
</style>
